<template>
  <div class="payApplication">
    <!-- 支付申请记录 -->
    <!-- 表格部分 -->
    <div class="tableData">
      <el-table
        style="width: 100%;margin-bottom: 40px"
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
      >
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column align="center" label="店铺ID" prop="user_id"></el-table-column>
        <el-table-column align="center" min-width="120" label="商户名称" prop="sv_merchant_name"></el-table-column>
        <el-table-column align="center" min-width="120" label="手机号码">
          <template slot-scope="scope">
            <div>
              <el-button
                style="cursor: pointer;color: #0094ff"
                type="text"
                @click="opendialog(scope.row)"
              >{{scope.row.sv_phone}}</el-button>
              <el-dialog
                title="微信支付申请审核"
                :visible.sync="dialogVisible"
                width="25%"
                style="text-align: left"
              >
                <el-form label-position="right" label-width="80px" :model="dialogData">
                  <el-form-item label="店铺id">
                    <span>{{dialogData.user_id}}</span>
                  </el-form-item>
                  <el-form-item label="商户姓名">
                    <span>{{dialogData.sv_merchant_name}}</span>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <span>{{dialogData.sv_phone}}</span>
                  </el-form-item>
                  <el-form-item label="审核说明">
                    <el-input
                      style="width: auto"
                      v-model="dialogData.sv_approval_remarks"
                      placeholder="请输入审批说明"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="审核">
                    <el-select v-model="dialogData.sv_state" placeholder="请选择">
                      <el-option
                        v-for="(item,index) in sv_state"
                        :key="index"
                        :label="item.value"
                        :value="item.stateid"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleCheck">保存</el-button>
                    <el-button @click="dialogVisible = false">返回</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" label="营业执照">
          <template slot-scope="scope">
            <el-popover placement="right" title trigger="click">
              <img
                :src="'http://res.decerp.cc'+scope.row.sv_business_license_img"
                min-width="720"
                height="600"
              />
              <img
                slot="reference"
                style="cursor: pointer;"
                :src="'http://res.decerp.cc'+scope.row.sv_business_license_img"
                max-width="120"
                height="80"
                :onerror="errorGoodsImg"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" label="证件正面图片">
          <template slot-scope="scope">
            <el-popover placement="right" title trigger="click">
              <img
                :src="'http://res.decerp.cc'+scope.row.sv_negative_documents"
                min-width="720"
                height="600"
              />
              <img
                slot="reference"
                style="cursor: pointer;"
                :src="'http://res.decerp.cc'+scope.row.sv_negative_documents"
                max-width="120"
                height="80"
                :onerror="errorGoodsImg"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" label="证件反面图片">
          <template slot-scope="scope">
            <el-popover placement="right" title trigger="click">
              <img
                :src="'http://res.decerp.cc'+scope.row.sv_positive_document_img"
                min-width="720"
                height="600"
              />
              <img
                slot="reference"
                style="cursor: pointer;"
                :src="'http://res.decerp.cc'+scope.row.sv_positive_document_img"
                max-width="120"
                height="80"
                :onerror="errorGoodsImg"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" label="组织机构代码证">
          <template slot-scope="scope">
            <el-popover placement="right" title trigger="click">
              <img
                :src="'http://res.decerp.cc'+scope.row.sv_legalperson_bankcard_img"
                min-width="720"
                height="600"
              />
              <img
                slot="reference"
                style="cursor: pointer;"
                :src="'http://res.decerp.cc'+scope.row.sv_legalperson_bankcard_img"
                max-width="120"
                height="80"
                :onerror="errorGoodsImg"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          min-width="120"
          :show-overflow-tooltip="true"
          align="center"
          label="支行名称"
          prop="sv_bank_account"
        ></el-table-column>
        <el-table-column
          align="center"
          min-width="160"
          label="提交时间"
          prop="sv_add_date"
          :formatter="dateFormat"
        ></el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.sv_state==0">等待受理</span>
            <span v-else-if="scope.row.sv_state==1">正在受理</span>
            <span v-else-if="scope.row.sv_state==2">已受理</span>
            <span v-else="scope.row.sv_state==3">审核不通过</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="sv_approval_remarks"></el-table-column>
        <el-table-column align="center" label="支付资料">
          <template slot-scope="scope">
            <a
              :href="hrefUrl[scope.$index]"
              @click="handleDownload(scope.row,scope.$index)"
              style="color: #0094ff;cursor: pointer"
            >资料下载</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器部分 -->
    <Pagination
      :total="total"
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      loading: true,
      errorGoodsImg: "",
      // 模糊查找
      search: "",
      // 审核窗口
      dialogVisible: false,
      dialogData: {},
      sv_state: [
        { stateid: 0, value: "等待受理" },
        { stateid: 1, value: "正在受理" },
        { stateid: 2, value: "已受理" },
        { stateid: 3, value: "审核不通过" }
      ],
      // 下载链接
      hrefUrl: [],
      // 分页器的数据
      total: 0, // 总条数
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页数量
      // 身份令牌
      myToken: ""
    };
  },
  components: { Pagination },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 初始化列表
      this.getOrderData();
    },
    // 获取数据的方法
    getOrderData() {
      this.loading = true;
      this.$api
        .getPaymentInformationList(this.pageIndex, this.pageSize, this.myToken)
        .then(res => {
          this.loading = false;
          const { dataList, total } = res.values;
          this.total = total;
          if (dataList != null) {
            this.tableData = dataList.map(v => {
              var urls = `${v.sv_shop_panorama_img},${v.sv_in_store_panorama_img},${v.sv_business_license_img},${v.sv_negative_documents},${v.sv_positive_document_img},${v.sv_legalperson_bankcard_img},${v.sv_openacount_licence_img}`;
              console.log(urls);
              this.errorGoodsImg =
                "this.src='/static/noImg.jpg';this.onerror = null";
              return {
                ...v
              };
            });
          }
        });
    },
    // 搜索的功能
    handleSearch() {
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 打开弹窗
    opendialog(val) {
      this.dialogVisible = true;
      this.dialogData = val;
    },
    // 审核方法
    handleCheck() {
      this.$api
        .paymentInformationAudit(
          this.dialogData.sv_alipayinfo_id,
          this.dialogData.sv_state,
          this.dialogData.sv_approval_remarks,
          this.myToken
        )
        .then(res => {
          if (res.succeed) {
            this.$message({
              type: "success",
              message: "修改成功"
            });
          } else {
            this.$message.error("操作失败");
          }
          this.dialogVisible = false;
        });
    },
    // 资料下载
    handleDownload(val, i) {
      /**
       * @sv_shop_panorama_img 店外全景
       * @sv_in_store_panorama_img 店内全景
       * @sv_business_license_img 营业执照
       * @sv_negative_documents 法人身份证正面
       * @sv_positive_document_img 法人身份证反面
       * @sv_legalperson_bankcard_img 法人银行卡正面
       * @sv_openacount_licence_img 开户许可证
       */
      var urls = "";
      var urls = `${val.sv_shop_panorama_img},${val.sv_in_store_panorama_img},${val.sv_business_license_img},${val.sv_negative_documents},${val.sv_positive_document_img},${val.sv_legalperson_bankcard_img},${val.sv_openacount_licence_img}`;
      var fileData = new FormData();
      fileData.append("urls", urls);
      if (this.hrefUrl[i] === undefined) {
        this.$api
          .downloadInformation(
            fileData,
            val.sv_alipayinfo_id,
            val.sv_payment_account
          )
          .then(res => {
            const { succeed, values } = res;
            if (succeed) {
              this.hrefUrl[i] = "http://res.decerp.cc" + values;
              window.location.href = "http://res.decerp.cc" + values;
            }
          });
      }
    },
    // 分页器的方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOrderData();
    },
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.payApplication {
  background-color: #fff;
  padding: 20px;
  .search {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }
  // 更改表头颜色
  .tableData @{deep} .el-table th {
    background-color: #fafafa;
    color: #252525;
    font-weight: 100;
  }
}
</style>